<script setup lang="ts">
defineProps<{ size?: number, color?: string }>();
</script>

<template>
    <view class="loading-icon" :style="{ color, height: size ? size + 'px' : void 0 }">
        <view class="loading-line" v-for="item in 8" :key="item" :style="{ '--i': item }"></view>
    </view>
</template>

<style lang="scss">
.loading-icon {
    position: relative;
    height: 20px;
    aspect-ratio: 1/1;

    .loading-line {
        position: absolute;
        top: 25%;
        left: 50%;
        width: 5%;
        height: 20%;
        background-color: #27ba9b;
        transform: translate(-50%, -50%) rotate(calc(var(--i) * 45deg));
        transform-origin: 50% 175%;
        animation: loading 1s calc(var(--i) * 125ms) infinite;
    }
}

@keyframes loading {
    from {
        opacity: 1;
    }

    to {
        opacity: 0.2;
    }
}
</style>